import React, { useState } from 'react';
import { Form, Input, Button, Card, message, Typography, Divider } from 'antd';
import { 
  UserOutlined, 
  LockOutlined, 
  EyeInvisibleOutlined, 
  EyeTwoTone,
  DashboardOutlined,
  SafetyCertificateOutlined
} from '@ant-design/icons';
import './Login.css';

const { Title, Text } = Typography;

function Login({ onLogin }) {
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    const { username, password } = values;
    
    setLoading(true);
    setError('');

    try {
      // 模拟登录验证
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      if (username === 'admin' && password === '123456') {
        message.success('登录成功！');
        onLogin({ 
          username, 
          role: 'admin',
          name: '系统管理员',
          avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=admin'
        });
      } else {
        throw new Error('用户名或密码错误');
      }
    } catch (err) {
      setError(err.message);
      message.error(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-container">
      <div className="login-background">
        <div className="login-overlay"></div>
        <div className="login-particles">
          {[...Array(20)].map((_, i) => (
            <div key={i} className="particle" style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 2}s`,
              animationDuration: `${3 + Math.random() * 2}s`
            }}></div>
          ))}
        </div>
      </div>

      <div className="login-content">
        <Card className="login-card">
          <div className="login-header">
            <div className="login-logo">
              <DashboardOutlined />
            </div>
            <Title level={2} className="login-title">
              后台管理系统
            </Title>
            <Text type="secondary" className="login-subtitle">
              欢迎回来，请登录您的账户
            </Text>
          </div>

          <Divider />

          <Form
            name="login"
            layout="vertical"
            onFinish={onFinish}
            className="login-form"
            size="large"
          >
            {error && (
              <div className="login-error">
                <SafetyCertificateOutlined />
                <span>{error}</span>
              </div>
            )}

            <Form.Item
              name="username"
              rules={[
                { required: true, message: '请输入用户名!' },
                { min: 3, message: '用户名至少3个字符!' }
              ]}
            >
              <Input 
                prefix={<UserOutlined className="input-icon" />}
                placeholder="请输入用户名"
                className="login-input"
                autoComplete="username"
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                { required: true, message: '请输入密码!' },
                { min: 6, message: '密码至少6个字符!' }
              ]}
            >
              <Input.Password
                prefix={<LockOutlined className="input-icon" />}
                placeholder="请输入密码"
                className="login-input"
                autoComplete="current-password"
                iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
              />
            </Form.Item>

            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                className="login-button"
                loading={loading}
                block
              >
                {loading ? '登录中...' : '登录系统'}
              </Button>
            </Form.Item>
          </Form>

          <div className="login-footer">
            <Text type="secondary" className="login-tip">
              默认账号: admin / 123456
            </Text>
            <div className="login-features">
              <div className="feature-item">
                <span className="feature-dot"></span>
                <Text>安全可靠的身份验证</Text>
              </div>
              <div className="feature-item">
                <span className="feature-dot"></span>
                <Text>响应式设计，多设备支持</Text>
              </div>
              <div className="feature-item">
                <span className="feature-dot"></span>
                <Text>实时数据监控和管理</Text>
              </div>
            </div>
          </div>
        </Card>

        <div className="login-copyright">
          <Text type="secondary">
            © 2024 后台管理系统 - 专业的企业级管理平台
          </Text>
        </div>
      </div>
    </div>
  );
}

export default Login;